<template>
  <div>
    <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px;">
      <span style="font-weight: bold;">在线用户统计（共{{ tableData.length }}人）</span>
      <el-input v-model="search" placeholder="请输入账户信息" style="width: 220px;">
        <template #append>
          <el-button icon="el-icon-search" />
        </template>
      </el-input>
    </div>
    <el-table
      :data="filteredData"
      style="width: 100%"
      row-key="id"
      border
    >
      <!-- 展开行 -->
      <el-table-column type="expand">
        <template #default="props">
          <el-table
            :data="props.row.clients"
            style="width: 90%; margin-left: 40px;"
            show-header="false"
            size="small"
          >
            <el-table-column>
              <template #default="scope">
                <span>
                  <el-icon><Monitor /></el-icon>
                  {{ scope.row.os }}
                </span>
              </template>
            </el-table-column>
            <el-table-column prop="browser" label="浏览器信息" />
            <el-table-column prop="sessionDuration" label="本次会话时长" />
            <el-table-column>
              <template #default="scope">
                <span :style="{ color: scope.row.status === '离开' ? 'red' : '#666' }">
                  {{ scope.row.status }}
                </span>
              </template>
            </el-table-column>
          </el-table>
        </template>
      </el-table-column>

      <el-table-column type="index" label="#" width="50" />
      <el-table-column label="账户信息">
        <template #default="scope">
          <el-icon style="color: #f5a623; margin-right: 4px;"><UserFilled /></el-icon>
          <span style="font-weight: bold;">{{ scope.row.role }}</span>
          <span style="color: #888; margin-left: 4px;">({{ scope.row.account }})</span>
        </template>
      </el-table-column>
      <el-table-column prop="org" label="所属单位" />
      <el-table-column prop="onlineDuration" label="在线时长" />
      <el-table-column prop="loginTime" label="上线时间" />
    </el-table>
  </div>
</template>

<script setup>
import { ref, computed } from 'vue'
import { UserFilled, Monitor } from '@element-plus/icons-vue'

const search = ref('')
const tableData = ref([
  {
    id: 1,
    role: '管理员',
    account: 'admin',
    org: '',
    onlineDuration: '8 分钟30 秒',
    loginTime: '2025-06-19 13:26:09',
    clients: [
      {
        os: 'Windows',
        browser: 'Chrome',
        sessionDuration: '3 分钟18 秒',
        status: '离开'
      },
      {
        os: 'Windows',
        browser: 'Chrome',
        sessionDuration: '刚刚',
        status: '暂离'
      }
    ]
  }
  // 可以继续添加更多用户
])

const filteredData = computed(() => {
  if (!search.value) return tableData.value
  return tableData.value.filter(row =>
    row.account.includes(search.value) ||
    row.role.includes(search.value)
  )
})
</script>